<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>个人导航</title>
    <link rel="shortcut icon" href="favcion.ico" />
    <link rel="stylesheet" href=" css/iconfont.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="container" id="container">
        <aside class="left-bar" id="leftBar">
            <div class="title">
                <p>个人导航</p>
            </div>
            <nav class="nav">
                <div class="item active"><a href=""><i class="iconfont icon-daohang2"></i>个人导航</a><i class="line"></i></div>
                <ul class="nav-item" id="navItem">
                    <li v-for="(items, name, index) in subs"><a :href="'#'+name">{{name}}</a></li>
                </ul>
            </nav>
        </aside>
        <section class="main">
            <div id="mainContent">
                <div class="box" v-for="(items, name, index) in subs">
                    <a href="#" :name="name"></a>
                    <div class="sub-category"> <div>{{name}}</div> </div>
                    <div>
                        <a v-for="item in items" target="_blank" :href="item.link">
                            <div class="item">
                                <div class="logo">
                                    <img :src="'img/'+item.name+'.ico'" onerror="imgerrorfun()">
                                    {{item.name}}
                                </div>
                                <div v-if="item.desc" class="desc">{{item.desc}}</div>
                            </div>
                        </a>
                    </div>
                </div>
        </section>
        <script src="./js/vue3.js"></script>
        <script src="./js/js-yaml.js"></script>
        <script src="./js/jquery.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
        <script>
            new Vue({
                el: '#container',
                data: function(){ return { 
                    subs : { }
                } },
                mounted(){
                    // axios.get('./navi.json').then(resp=>{ this.subs = resp.data; })
                    // axios.get('http://rcy074sxv.hn-bkt.clouddn.com/navigations.yaml')
                    axios.get('./navi.yaml')
                    .then(resp=>{  this.subs = jsyaml.load(resp.data); console.log(this.subs) })
                },
            })

            var oLeftBar = document.getElementById('leftBar');
            var menuFrom = document.getElementById('menu-form');

            function imgerrorfun(){ 
                var img=event.srcElement; 
                img.src="img/default.png";
                img.onerror=null; 
            } 


            // 监听页面宽度变化
            window.onresize = function() {
                judgeWidth();
                // console.log(document.documentElement.clientWidth);
            };

            // 判断页面宽度
            function judgeWidth() {
                if (document.documentElement.clientWidth > 481) {
                    oLeftBar.style.left = 0;
                } else {
                    oLeftBar.style.left = -249 + 'px';
                }
            }


            var oNavItem = document.getElementById('navItem');
            var aA = oNavItem.getElementsByTagName('a');
            for (var i = 0; i < aA.length; i++) {
                aA[i].onclick = function() {
                    for (var j = 0; j < aA.length; j++) 
                        aA[j].className = '';
                    this.className = 'active';
                    if (oLeftBar.offsetLeft == 0) {
                        if (document.documentElement.clientWidth <= 481) {
                            oLeftBar.style.left = -249 + 'px';
                            menuFrom.checked = false;

                        }
                    }
                }
            }


            $(window).scroll(function() {
                if($(window).scrollTop() >= 200)
                    $('#fixedBar').fadeIn(300);
                else
                    $('#fixedBar').fadeOut(300);
            });
            $('#fixedBar').click(function() {
                $('html,body').animate({scrollTop:'0px'},800);
            })
        </script>
</body>

</html>